<template>
  <el-table :data="services" :height="tableHeight" size="small" style="width: 70%; margin: 10px auto">
    <el-table-column label="服务名" prop="name" width="120"></el-table-column>
    <el-table-column label="状态" prop="status" width="60"></el-table-column>
    <el-table-column label="最后检查时间" prop="lastTime" width="150"></el-table-column>
    <el-table-column label="异常">
      <template slot-scope="scope">
        <span v-html="scope.row.error"></span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script type="text/javascript">
  export default {
    props: ['winP'],
    data () {
      return {
        services: []
      }
    },
    computed: {
      tableHeight () {
        return this.winP.height - 116
      }
    },
    mounted() {
      this.getStatus()
      setInterval(this.getStatus, 300000)
    },
    methods: {
      async getStatus() {
        let result = await this.$api.call({
          service: 'service'
        })
        for (let v of result) {
          if(v.error) {
            v.error = v.error.replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;')
          }
        }
        this.$set(this, 'services', result)
      }
    }
  }
</script>